<template>
  <transition name="slide-fade">
    <div v-show="visible" class="messageBox">
      <div class="messageBox_box" >
        <h3 class="messageBox_box--title">{{title}}</h3>
        <div class="messageBox_box--content">
          <content-view></content-view>
        </div>
        <div class="messageBox_box--button">
          <Button type="danger" class="mr10" v-if="showCacelButton" @click="cacelButton">{{cacelButtonText}}</Button>
          <Button type="success" @click="confirmButton">{{confirmButtonText}}</Button>
        </div>
      </div>
    </div>
  </transition>
</template>
<script setup>
  import {reactive, toRefs,h} from "vue"
  import Button from "../Button"
  import mitt from "../../mitt"
  const props = defineProps({
    type: {
      type: String,
      default: "alert",
    },
    title: {
      type: String,
      default: "提示",
    },  
    content: {
      type: String,
      default: "这是弹窗消息！",
    },
    showCacelButton: {
      type: Boolean,
      default: false,
    },
    cacelButtonText: {
      type: String,
      default: "取 消",
    },
    confirmButtonText: {
      type: String,
      default: "确 定",
    }
  })

  const state = reactive({
    visible: false,
    value: ""
  })

  const contentView = () => {
    const type = props.type
    switch (type) {
      case !type || 'alert':
        return h("div",null, props.content)
      case 'confirm':
        return h("div",null, props.content)
      case 'prompt': 
        return h("div",{
          className: "prompt_content"
        },[
          h("p",{
            className: "prompt_title"
          },props.content),
          h("input",{
            className: "inp",
            onInput: (e) => {state.value = e.target.value.trim()}
          })
        ])

    }
  }
  const cacelButton = () => {
    mitt.emit("messageBoxCacel")
  }

  const confirmButton = () => {
    mitt.emit("messageBoxConfirm",state.value)
  }

  const setVisible = (isVisible) => {
    state.visible = isVisible
  }

  const {visible} = toRefs(state)

  defineExpose({
    setVisible
  })
</script>
<style >
.messageBox{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.messageBox_box {
  width: 400px;
  background: #fff;
  padding: 16px;
  border-radius:16px;
}

.messageBox_box--title {
  margin-bottom: 20px;
}
.messageBox_box--button {
  margin-top: 20px ;
  text-align: right;
}
.prompt_content {
  width: 100%;
}
.prompt_title {
  margin-bottom: 16px;
}
.prompt_content .inp {
  width: 100%;
  height: 35px;
  font-size: 16px;
  outline: none;
  border: none;
  text-indent: 16px;
  border: 1px solid #dcdfe6;
}
.inp:focus {
  border: 1px solid royalblue;
}
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>